<template>
  <!--            底部导航         -->
  <div class="footer">

      <div class="footerNav" :class="{footerNavAct: '/class' === $route.path}" @click="goTo('/class')">
          <i class="iconfont iconbanji"></i>
          <p>班级</p>
      </div>



      <div class="footerNav" :class="{footerNavAct: '/card' === $route.path}" @click="goTo('/card')">
        <i class="iconfont iconyiqiatong"></i>
        <p>一卡通</p>
      </div>



      <div class="footerNav" :class="{footerNavAct: '/work' === $route.path}" @click="goTo('/work')">
        <i class="iconfont iconbangong"></i>
        <p>办公</p>
      </div>


    <router-link to="/user">
      <div class="footerNav" :class="{footerNavAct: '/user' === $route.path}">
        <i class="iconfont iconwo"></i>
        <p>我的</p>
      </div>
    </router-link>
  </div>
</template>

<script>
    export default {
        name: "footerNav",
      methods:{
        goTo:function (path) {
          this.$router.replace(path)
        }
      }
    }
</script>

<style scoped>
  .footer{width: 100%; height:4rem; position: fixed; left: 0; bottom: 0; background: #fff; border-top: 0.5rem solid #f8f8f8; z-index: 100;}
  .footer .footerNav{width: 6rem; height: 4rem; box-sizing: border-box; float: left; margin: 0 0.375rem 0; }
  .footer .footerNav i{display: block;  height: 1.5rem; margin:0.5rem 0 0.4rem 0; text-align: center; font-size: 1.5rem; color: #999;}
  .footer .footerNav p{ height: 1rem; line-height: 1rem; font-size: 1rem; text-align: center; color: #999999;}
  .footer .footerNavAct p,.footer .footerNavAct i{ color: #00c08c;}


</style>
